<template>
	<view class="setting_content">
		<view class="admin_main">
			<u--form :model="form" :rules="rules" ref="ruleForm" class="demo-ruleForm-login">
				<!-- 旧密码 -->
				<u-form-item prop="old_password" class="u-form-item-login" v-if="!passwordAble">
					<u-input prefixIcon="lock-fill" v-model="form.old_password" class="u-input-login" placeholder="旧密码"
						password>
						<template slot="suffix">
							<u-icon v-show="form.old_password" name="eye-fill" @click="passwordAble=true"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item prop="password" class="u-form-item-login" v-if="passwordAble">
					<u-input prefixIcon="lock-fill" v-model="form.old_password" class="u-input-login" placeholder="旧密码">
						<template slot="suffix">
							<u-icon v-show="form.old_password" name="eye-off" @click="passwordAble=false"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<!-- 新密码 -->
				<u-form-item prop="password" class="u-form-item-login" v-if="!passwordAble1">
					<u-input prefixIcon="lock-fill" v-model="form.password" class="u-input-login" placeholder="新密码"
						password>
						<template slot="suffix">
							<u-icon v-show="form.password" name="eye-fill" @click="passwordAble1=true"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item prop="password" class="u-form-item-login" v-if="passwordAble1">
					<u-input prefixIcon="lock-fill" v-model="form.password" class="u-input-login" placeholder="新密码">
						<template slot="suffix">
							<u-icon v-show="form.password" name="eye-off" @click="passwordAble1=false"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<!-- 确认密码 -->
				<u-form-item prop="password" class="u-form-item-login" v-if="!passwordAble2">
					<u-input prefixIcon="lock-fill" v-model="form.passwords" class="u-input-login" placeholder="确定密码"
						password>
						<template slot="suffix">
							<u-icon v-show="form.passwords" name="eye-fill" @click="passwordAble2=true"></u-icon>
						</template>
					</u-input>
				</u-form-item>
				<u-form-item prop="password" class="u-form-item-login" v-if="passwordAble2">
					<u-input prefixIcon="lock-fill" v-model="form.passwords" class="u-input-login" placeholder="确定密码">
						<template slot="suffix">
							<u-icon v-show="form.passwords" name="eye-off" @click="passwordAble2=false"></u-icon>
						</template>
					</u-input>
				</u-form-item>
			</u--form>
			<!-- <el-form :model="form" :rules="rules" ref="ruleForm" class="demo-ruleForm-login">
				<el-form-item label="旧密码" prop="old_password" class="el-form-item-login">
					<el-input prefix-icon="el-icon-s-goods" v-model="form.old_password" class="el-input-login"
						placeholder="请输入旧密码" show-password></el-input>
				</el-form-item>
				<el-form-item label="新密码" prop="password" class="el-form-item-login">
					<el-input prefix-icon="el-icon-s-goods" v-model="form.password" class="el-input-login"
						placeholder="请输入新密码" show-password></el-input>
				</el-form-item>
				<el-form-item label="确定密码" prop="passwords" class="el-form-item-login">
					<el-input prefix-icon="el-icon-s-goods" v-model="form.passwords" class="el-input-login"
						placeholder="请在次输入密码" show-password></el-input>
				</el-form-item>
			</el-form> -->
		</view>
		<view class="position_footer flex aic jcsb">
			<u-button class="blue_btn" style="width: 100%;" type="primary" @click="resect('ruleForm')">保存</u-button>
		</view>
	</view>
</template>

<script>
	import {
		updatePassword
	} from "@/api/my.js"
	export default {
		data() {
			var checkPhone = (rule, value, callback) => {
				if (!value) {
					return callback(new Error("手机号不能为空"));
				} else {
					const reg = /^1[3-9][0-9]\d{8}$/;
					// 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
					if (reg.test(value)) {
						callback();
					} else {
						// 具体错误信息没有提示
						return callback(new Error("请输入正确的手机号"));
					}
				}
			};
			return {
				passwordAble2: false,
				passwordAble1: false,
				passwordAble: false,
				show: true,
				count: 60,
				text: '获取验证码',
				timer: null,
				type: "",
				password: "",
				form: {
					password: "",
					code: "",
					phone: ""
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}, {
						validator: checkPhone,
						trigger: "blur"
					}],
					old_password: [{
						required: true,
						message: '请输入旧密码',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}],
					passwords: [{
						required: true,
						message: '请再次输入密码',
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			getYan(formName) {
				this.$refs[formName].validateField("phone", (res) => {
					console.log(res);
					if (!res) {
						const TIME_COUNT = 60;
						if (!this.timer) {
							this.count = TIME_COUNT;
							this.show = false;
							this.timer = setInterval(() => {
								if (this.count > 0 && this.count <= TIME_COUNT) {
									this.count--;
								} else {
									this.show = true;
									this.text = "重新获取"
									clearInterval(this.timer);
									this.timer = null;
								}
							}, 1000)
						}
						console.log("进来了");
						let obj = {
							phonenumber: this.form.phone
						}
						get_reg_sms(obj).then(res => {
							console.log(res.msg);
							if (res.code == 200) {
								uni.showToast({
									title: res.msg,
									icon: 'success'
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'error'
								})
							}

						})
					} else {

					}

				})
			},
			resect(formName) {
				this.$refs.ruleForm.validate().then(res => {
					if (this.form.password != this.form.passwords) {
						uni.showToast({
							title: "两次密码不一致",
							icon: 'error'
						})
						return
					}
					let params = {
						"oldPassword": this.form.old_password,
						"newPassword": this.form.passwords,
					}
					updatePassword(params).then(res => {
						console.log(res.data);
						if (res.code == 200) {
							uni.showToast({
								title: "重置成功",
								icon: 'success'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							}, 500)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'error'
							})
						}
					
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
				

			},
			userLogins() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		}
	}
</script>

<style lang="scss">
	.setting_content {
		padding: 10px 0px;
		height: calc(100vh - 64px);
		background: #F8F9FA;
		position: relative;

		.admin_main {
			padding: 10px 12px;
			width: calc(100% - 24px);
		}

		.position_footer {
			height: 40px;
			z-index: 1;
			position: absolute;
			bottom: 0;
			background: #ffffff;
			box-shadow: 0px -1px 3px 0px rgba(48, 48, 48, 0.0592);
			border-radius: 0px 0px 0px 0px;
			opacity: 1;
			width: calc(100vw - 24px);
			padding: 12px;

			.blue_btn {
				background: #2F6CBC;
				border: 1px solid #2F6CBC;
			}
		}
	}
</style>
